import React, { FC } from 'react'
import { HashRouter as Router, Routes, Route, useLocation, useNavigate } from "react-router-dom"
import { NavBar, TabBar } from 'antd-mobile'
import {
    AppOutline,
    MessageOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

import Home from '../pages/Home'
import Service from '../pages/Service'
import News from '../pages/News'
import Mine from '../pages/Mine'
import ChangeUser from '../pages/mine/ChangeUser'
import Education from '../pages/Education'
import Library from '../pages/Library'
import LibraryCom from '../components/LibraryCom'
import Donation from '../pages/Donation'
import Bus from "../pages/Bus";
import Movie from "../pages/Movie"
import ClassifyPage from '../components/Donation/ClassfyPage';
import DonationItem from '../components/Donation/DonationItem';
import NewDetail from '../pages/NewsDeatil'



const Bottom: FC = () => {
    const history = useNavigate();
    const location = useLocation()
    const { pathname } = location

    const setRouteActive = (value: string) => {
        history(value);
    }

    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/service',
            title: '服务',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/news',
            title: '新闻',
            icon: <MessageOutline />,
        },
        {
            key: '/mine',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    return (
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
        </TabBar>
    )
}

export default function index() {
    return (
        <Router>
            <Routes>
                <Route path='/' element={<Home></Home>} ></Route>
                <Route path='/service' element={<Service></Service>} ></Route>
                <Route path='/news' element={<News></News>} ></Route>
                <Route path='/news/detail' element={<NewDetail></NewDetail>} ></Route>
                <Route path='/mine' element={<Mine></Mine>} ></Route>
                <Route path='/mine/changeUser' element={<ChangeUser></ChangeUser>} ></Route>
                <Route path='/education/index' element={<Education></Education>} ></Route>
                <Route path="/bus_query/*" element={<Bus></Bus>}></Route>
                <Route path="/movie/*" element={<Movie></Movie>}></Route>
                <Route path='/library/index' element={<Library></Library>} ></Route>
                <Route path='/librarycom' element={<LibraryCom></LibraryCom>} ></Route>
                <Route path='/welfare/index' element={<Donation></Donation>} ></Route>
                <Route path='/classifyPage' element={<ClassifyPage></ClassifyPage>} ></Route>
                <Route path='/donationItem' element={<DonationItem></DonationItem>} ></Route>
            </Routes>
            <div className='bottom'>
                <Bottom></Bottom>
            </div>
        </Router>
    )
}
